<template>
	<div class="add-vr-info">
		<!-- 修改地址弹框 -->
		<el-form :model="modifyAddressForm" :rules="modifyAddressRules" ref="modifyAddressForm">
			<div class="info-exhibition">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="省份:" prop="province">
							<el-input v-model="modifyAddressForm.province" placeholder="请输入省份"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="城市:" prop="city">
							<el-input v-model="modifyAddressForm.city" placeholder="请输入城市"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="区/县:" prop="area">
							<el-input v-model="modifyAddressForm.area" placeholder="请输入地区"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="联系人:" prop="accept_name">
							<el-input v-model="modifyAddressForm.accept_name" placeholder="请输入联系人"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="联系电话:" prop="mobile_phone">
					<el-input v-model="modifyAddressForm.mobile_phone" placeholder="请输入联系电话"></el-input>
				</el-form-item>
				<el-form-item label="详细地址:" prop="address">
					<el-input v-model="modifyAddressForm.address" placeholder="请输入详细地址"></el-input>
				</el-form-item>
			</div>
		</el-form>
		<div style="padding-bottom: 20px;">
			<el-button @click="cancel()">取 消</el-button>
			<el-button type="primary" @click="addFabricClick('modifyAddressForm')">确 定</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			layerid: {
				type: String,
				default: ''
			},
			type: {
				type: Number,
				default: 0
			},
			id: {
				type: Number,
				default: 0
			},
			info: Object
		},
		data() {
			return {
				modifyAddressForm: this.info,
				modifyAddressRules: {
					accept_name: [{
						required: true,
						message: '请输入联系人'
					}],
					mobile_phone: [{
						required: true,
						message: '请输入联系号码'
					}],
					province: [{
						required: true,
						message: '请输入省份'
					}],
					city: [{
						required: true,
						message: '请输入城市'
					}],
					area: [{
						required: true,
						message: '请输入地区'
					}],
					address: [{
						required: true,
						message: '请输入详细地址'
					}]
				},
			};
		},
		methods: {
			addFabricClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$http(this.$ApiList.OrderUpAddresss, this.modifyAddressForm).then(res => {
							this.$layer.msg('修改成功');
							// this.$parent.init();
							this.cancel();
						});
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			cancel() {
				this.$layer.close(this.layerid);
			}
		},
		created() {

		}
	};
</script>
<style lang="scss">
	.add-vr-info {
		padding: 20px 20px;

		.el-upload,
		.preview-img {
			width: 300px;
			height: 200px;
		}

		.el-icon-plus {
			line-height: 200px;
			font-size: 60px;
		}
	}
</style>
